<template>
  <require from="./solution-explorer-list.css"></require>
  <require from="../solution-explorer-solution/solution-explorer-solution"></require>

  <div class="solution-explorer-list">

    <div class="solution-list">
      <div repeat.for="solutionEntry of openedSolutionsToDisplay" class="solution-entry">

        <div class="solution-entry__header" class.bind="solutionEntry.isConnected ? '' : 'solution-entry__header--error'" title.bind="solutionEntry.processEngineVersion ? `${solutionEntry.uri} | Version: ${solutionEntry.processEngineVersion}` : solutionEntry.uri">

        <div class="solution-entry__collapse-header" click.delegate="toggleSolution(solutionEntry)">

          <div class="solution-entry__left-icon_and_name">

            <i if.bind="solutionEntry.hidden" class="fas fa-angle-right collapse__icon" title="Expand Solution"></i>
            <i if.bind="!solutionEntry.hidden" class="fas fa-angle-down collapse__icon" title="Collapse Solution"></i>

            <i class="${solutionEntry.cssIconClass} solution-entry__solution-icon" title.bind="solutionEntry.tooltipText"></i>

            <i if.bind="checkIfSolutionIsRemoteSolution(solutionEntry.uri) && isProcessEngineNewerThanInternal(solutionEntry) & signal:'update-version-icon'" class="fas fa-info-circle version-info version-info--new" click.capture="showNewerModal($event)" title="ProcessEngine is newer. Click to show more information."></i>
            <i if.bind="checkIfSolutionIsRemoteSolution(solutionEntry.uri) && isProcessEngineOlderThanInternal(solutionEntry) & signal:'update-version-icon'" class="fas fa-info-circle version-info version-info--old" click.capture="showOlderModal($event)" title="ProcessEngine is outdated. Click to show more information."></i>

            <span class="solution-entry__solution-name" data-test-solution-entry-name="${getSolutionName(solutionEntry.uri)}" data-test-solution-is-internal="${solutionIsInternalSolution(solutionEntry)}" data-test-solution-is-connected="${peHasStarted ? 'true' : 'false'}">${getSolutionName(solutionEntry.uri)}</span>
          </div>
          <div class="solution-entry__solution-path">
            <span
              if.bind="!solutionEntryIsRemote(solutionEntry) && getSolutionName(solutionEntry.uri) !== solutionEntry.uri && solutionEntry.uri !== 'about:open-diagrams'"
              title.bind="solutionEntry.uri">
              ${solutionEntry.uri}
            </span>
          </div>
        </div>


          <div class.bind="checkIfSolutionIsRemoteSolution(solutionEntry.uri) ? 'solution-entry__actions_remote-solution' : 'solution-entry__actions'">

            <button class="button"
              if.bind="solutionIsInternalSolution(solutionEntry)"
              click.delegate="openSettings()"
              title="Open settings of the internal ProcessEngine">

              <i class="fa fa-cog"></i>
            </button>

            <button
              class="button"
              if.bind="solutionEntry.canCreateNewDiagramsInSolution"
              click.delegate="createDiagram(solutionEntry)"
              title="Create a new diagram">

              <i class="fa fa-file-medical"></i>
            </button>

            <button
              class="button"
              if.bind="solutionEntry.canCloseSolution"
              click.delegate="closeSolution(solutionEntry.uri)"
              title="Close the solution">

              <i class="fa fa-times"></i>
            </button>


            <button
              class="button"
              if.bind="solutionEntry.isOpenDiagram"
              click.delegate="closeAllOpenDiagrams()"
              title="Close all open diagrams">

              <i class="fa fa-times"></i>
            </button>

            <button class="button login-logout-button"
              if.bind="checkIfSolutionIsRemoteSolution(solutionEntry.uri) && !solutionEntry.isLoggedIn"
              click.delegate="login(solutionEntry)"
              title="Login to remote solution">

              <i class="fa fa-lock-open"></i>
            </button>

            <button class="button login-logout-button"
              if.bind="solutionEntry.isLoggedIn"
              click.delegate="logout(solutionEntry)"
              title.bind="`Logout ${solutionEntry.userName}`">

              <i class="fa fa-lock"></i>
            </button>
          </div>


        </div>

        <solution-explorer-solution
          displayed-solution-entry.two-way="solutionEntry"
          solution-service.bind="solutionEntry.service"
          open-diagram-service.bind="openDiagramService"
          view-model.ref="solutionEntryViewModels[solutionEntry.uri]"
          css-icon-class.two-way="solutionEntry.cssIconClass"
          is-connected.two-way="solutionEntry.isConnected"
          tooltip-text.two-way="solutionEntry.tooltipText"
          pe-has-started.two-way="peHasStarted"
          style.bind="solutionEntry.hidden ? 'display: none;' : 'display: inherit;'"
          class.bind="solutionEntry.isOpenDiagram ? 'open-diagrams-entry' : ''"
          login.bind="loginFunction">
        </solution-explorer-solution>
      </div>
    </div>

  </div>

  <modal if.bind="processEngineIsOlderModal"
         header-text="Older ProcessEngine Version"
         body-text="The ProcessEngine version is older than the integrated one. Maybe it's time for an update.">
    <template replace-part="modal-footer">
      <button type="button" class="btn btn-primary" data-dismiss="modal" click.delegate="processEngineIsOlderModal = false">Okay</button>
    </template>
  </modal>

  <modal if.bind="processEngineIsNewerModal"
         header-text="Newer ProcessEngine Version"
         body-text="The ProcessEngine version is newer than the built-in, so it may be that the BPMN Studio does not yet support some functionality.">
    <template replace-part="modal-footer">
      <button type="button" class="btn btn-primary" data-dismiss="modal" click.delegate="processEngineIsNewerModal = false">Okay</button>
    </template>
  </modal>
</template>
